<template>
  <div class="home-header">这是头部</div>
  <div class="container">
    <van-pull-refresh v-model="pullDownLoading" @refresh="onRefresh">
      <!-- 轮播 -->
      <van-swipe class="home-swiper" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="banner in banners" :key="banner.id">
          <img :src="banner.picUrl" alt="" />
        </van-swipe-item>
      </van-swipe>
      <!-- /轮播 -->
      <!-- 宫格导航 -->
      <van-grid>
        <van-grid-item
          v-for="cate in cates"
          :key="cate.id"
          :icon="cate.icon"
          :text="cate.name"
          :to="{
            path: '/itemLists',
            query: {
              cateId: cate.id,
            },
          }"
        />
      </van-grid>
      <!-- /宫格导航 -->
      <!-- 商品列表 -->
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        :immediate-check="false"
        @load="reachBottom"
      >
        <Items :items="items" @addCart="addCart" />
      </van-list>
      <!-- /商品列表 -->
    </van-pull-refresh>
  </div>
  <Tabbar />
</template>

<script setup lang="ts" name="HomePage">
import Tabbar from "@/components/Tabbar.vue";
import { ref, onMounted } from "vue";
import { getHomeBanner, fetchCates, fetchItems } from "@a/index";
import Items from "./components/Items.vue";
import useCartStore from "@/stores/cart";
const cartStore = useCartStore();
// 点击加入购物车
const addCart = (goodsId: number) => {
  cartStore.addCart(goodsId, 1);
};

// banner
const banners = ref<any[]>([]);
const fetchBanners = () => {
  getHomeBanner().then((res) => {
    if (res.data.code === 0) {
      banners.value = res.data.data;
    }
  });
};
// banner结束

// 宫格导航分类
const cates = ref<any[]>([]);
const getCates = () => {
  fetchCates().then((res) => {
    if (res.data.code === 0) {
      cates.value = res.data.data;
    }
  });
};
// 宫格导航分类结束

// 商品列表
const items = ref<any[]>([]);
let page = 1;
let pageSize = 5;
// 是否处于上拉触底 状态
const loading = ref(false);
// 是否已经是最后一页
const finished = ref(false);
const reachBottom = () => {
  page++;
  getItems();
};

// 下拉刷新
const pullDownLoading = ref(false);
const onRefresh = () => {
  // 重新请求列表数据
  page = 1;
  items.value = [];
  finished.value = false;
  getItems();
};
const getItems = () => {
  fetchItems({
    page,
    pageSize,
  }).then((res) => {
    loading.value = false;
    pullDownLoading.value = false;
    if (res.data.code === 0) {
      items.value = [...items.value, ...res.data.data.result];
    }
    if (res.data.code === 700) {
      finished.value = true;
    }
  });
};
onMounted(() => {
  fetchBanners();
  getCates();
  getItems();
});
</script>
<style lang="scss" scoped>
.home-header {
  height: 40px;
  background-color: #e93323;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  font-size: 18px;
  text-align: center;
  color: #fff;
  line-height: 40px;
  z-index: 1000;
}
.container {
  padding-top: 40px;
  padding-bottom: 50px;
  .home-swiper {
    width: 10rem;
    height: 5rem;
    img {
      width: 10rem;
      height: 5rem;
    }
  }
}
</style>
